/**
 * Created by ZhouWei on 2017/6/24.
 */
$(function(){

    var isChrome = navigator.userAgent.toLowerCase().match(/chrome/) != null;

    if($(window).height()>1200){
        if (isChrome) {
            $("#header").height(0).css("display","none");
            $("#bottomTable").height(0).css("display","none");
        }
        $(".dataTable").css("fontSize","11px");
    }

    dataHandle();

    //获取准备号的tr模板
    var tr = $(".dataTable tbody").children().eq(0);
    console.log(tr);
    var sale = $(".dataTable tbody").children().eq(1);
    //删除准备的模板
    $(".dataTable tbody").children().eq(0).remove();
    $(".dataTable tbody").children().eq(0).remove();
    //假数据
    var obj = [
        {
            qihao:44,
            kaijianghao:[1,5,3,6,7],
            guanzhu:[1,2,8]
        },
        {
            qihao:2,
            kaijianghao:[5,2,7,6,4],
            guanzhu:[2,4,8]
        },
        {
            qihao:3,
            kaijianghao:[4,6,5,10,7],
            guanzhu:[6,5,1]
        },
        {
            qihao:4,
            kaijianghao:[9,11,8,6,7],
            guanzhu:[6,5,11]
        },
        {
            qihao:5,
            kaijianghao:[2,10,5,6,7],
            guanzhu:[3,10,5]
        },
        {
            qihao:6,
            kaijianghao:[4,1,5,11,7],
            guanzhu:[1,6,7]
        },
        {
            qihao:7,
            kaijianghao:[11,9,5,6,7],
            guanzhu:[2,5,7]
        },
        {
            qihao:8,
            kaijianghao:[1,8,11,6,7],
            guanzhu:[2,1,3]
        },
        {
            qihao:9,
            kaijianghao:[10,3,5,6,7],
            guanzhu:[6,11,4]
        },
        {
            qihao:10,
            kaijianghao:[9,8,4,6,7],
            guanzhu:[8,5,4]
        },{
            qihao:44,
            kaijianghao:[1,5,3,6,7],
            guanzhu:[1,2,8]
        },
        {
            qihao:2,
            kaijianghao:[5,2,7,6,4],
            guanzhu:[2,4,8]
        },
        {
            qihao:3,
            kaijianghao:[4,6,5,10,7],
            guanzhu:[6,5,1]
        },
        {
            qihao:4,
            kaijianghao:[9,11,8,6,7],
            guanzhu:[6,5,11]
        },
        {
            qihao:5,
            kaijianghao:[2,10,5,6,7],
            guanzhu:[3,10,5]
        },
        {
            qihao:6,
            kaijianghao:[4,1,5,11,7],
            guanzhu:[1,6,7]
        },
        {
            qihao:7,
            kaijianghao:[11,9,5,6,7],
            guanzhu:[2,5,7]
        },
        {
            qihao:8,
            kaijianghao:[1,8,11,6,7],
            guanzhu:[2,1,3]
        },
        {
            qihao:9,
            kaijianghao:[10,3,5,6,7],
            guanzhu:[6,11,4]
        },
        {
            qihao:10,
            kaijianghao:[9,8,4,6,7],
            guanzhu:[8,5,4]
        }
    ];

    var newNum = [1,2,10];

    var time = "销售07:32";

    //坐标存放数组
    var coordinateRectF=[];
    var coordinateRectS=[];
    var coordinateRectT=[];

    var allCoordinateRect = [];

    //所有开奖号统计数组
    var statistics =[];

    var firstStatistics = [];

    var secondStatistics = [];

    var thirdStatistics = [];
    //初始化计数数组
    var tempObj = [0,0,0,0,0,0,0,0,0,0,0];

    var tempFirst = [0,0,0,0,0,0,0,0,0,0,0];

    var tempSecond = [0,0,0,0,0,0,0,0,0,0,0];

    var tempThird = [0,0,0,0,0,0,0,0,0,0,0];

    //二维数组将所有开奖号放到statistics中
    for(var g=0;g<obj.length;g++){
        for(var d=0;d<obj[g].kaijianghao.length;d++){
            if(d == 0){
                firstStatistics.push(obj[g].kaijianghao[d]);
            }else if(d == 1){
                secondStatistics.push(obj[g].kaijianghao[d]);
            }else if(d == 2){
                thirdStatistics.push(obj[g].kaijianghao[d]);
            }
            statistics.push(obj[g].kaijianghao[d]);
        }
    }
    //tempObj用于存放统计次数 第一位的值代表1出现的次数 依次类推
    for(var c=0;c<statistics.length;c++){
        tempObj[statistics[c]-1]++;
    }
    //tempFirst
    for(var c=0;c<firstStatistics.length;c++){
        tempFirst[firstStatistics[c]-1]++;
    }
    //tempSecond
    for(var c=0;c<firstStatistics.length;c++){
        tempSecond[secondStatistics[c]-1]++;
    }
    //tempThird
    for(var c=0;c<thirdStatistics.length;c++){
        tempThird[thirdStatistics[c]-1]++;
    }

    //根据传过来的数据多少创建空白行
    for(var i=0;i<obj.length+2;i++){
        //创建多行空白的带有class的tr
        if(i == obj.length){   //统计行
            var trClone =tr.clone();
            $(".dataTable tbody").append(trClone);
            //填入总期数
            $(".dataTable tbody tr").eq(i).addClass("statisticsRow");
            $(".dataTable tbody tr").eq(i).children().eq(0).html(obj.length+"期").attr('style','background:#00A6A6');
            //填入0
            var v = 0;
            $(".dataTable tbody tr").eq(i).find('.lotteryNumber').each(function(){
                $(this).html(0).attr('style','background:#00A6A6');
                v++;
            });
            //任选分布
            var e = 0;
            $(".dataTable tbody tr").eq(i).find('.optionalDis').each(function(){
                $(this).html(tempObj[e]).attr('style','background:#00A6A6');
                e++;
            });
            //第一位统计
            var first=0;
            $(".dataTable tbody tr").eq(i).find('.firstCon').each(function(){
                $(this).html(tempFirst[first]).attr('style','background:#00A6A6');
                first++;
            });
            //第二位统计
            var second=0;
            $(".dataTable tbody tr").eq(i).find('.secondCon').each(function(){
                $(this).html(tempSecond[second]).attr('style','background:#00A6A6');
                second++;
            });
            //第三位统计
            var third=0;
            $(".dataTable tbody tr").eq(i).find('.thirdCon').each(function(){
                $(this).html(tempThird[third]).attr('style','background:#00A6A6');
                third++;
            });
            //关注号码
            $(".dataTable tbody tr").eq(i).find('.attentionNum').each(function(){
                $(this).html(0).attr('style','background:#00A6A6');
            });
        }else if(i == obj.length+1){
            var saleClone =sale.clone();
            $(".dataTable tbody").append(saleClone);
            //填入期号
            $(".dataTable tbody tr").eq(i).children().eq(0).html("01");

            //填入倒计时
            $(".dataTable tbody tr").eq(i).find('.countDown').html(time);

            //关注号码
            var a = 0;
            $(".dataTable tbody tr").eq(i).find('.attentionNum').each(function(){
                $(this).html(newNum[a]);
                a++;
            });
        }else{
            var trClone =tr.clone();
            $(".dataTable tbody").append(trClone);
            //填入期号
            $(".dataTable tbody tr").eq(i).children().eq(0).html(obj[i].qihao);

            //将开奖号填入表格
            var j = 0;
            $(".dataTable tbody tr").eq(i).find('.lotteryNumber').each(function(){
                $(this).html(obj[i].kaijianghao[j]);
                j++;
            });
            //任选分布  遗漏还没做
            var k = 1;
            $(".dataTable tbody tr").eq(i).find('.optionalDis').each(function(){
                for(var m=0;m<obj[i].kaijianghao.length;m++){
                    if(obj[i].kaijianghao[m] == k){
                        if(m<3){
                            $(this).addClass("optionalDisRed");
                        }else{
                            $(this).addClass("optionalDisBlue");
                        }
                        $(this).html(obj[i].kaijianghao[m]);
                    }else{

                    }
                }
                k++;
            });

            //关注号码
            var a = 0;
            $(".dataTable tbody tr").eq(i).find('.attentionNum').each(function(){
                $(this).html(obj[i].guanzhu[a]);
                for(var num=0;num<obj[i].kaijianghao.length;num++){
                    if(obj[i].guanzhu[a] == obj[i].kaijianghao[num]){
                        $(this).addClass("attentionNumRed");
                    }
                }
                a++;
            });
        }
    }

    if($(window).height()>1200){
        if (isChrome) {
            $(".optionalDisRed").css("background-size","16px 18px");
            $(".optionalDisBlue").css("background-size","16px 18px");
        }else{
            $(".optionalDisRed").css("background-size","16px 16px");
            $(".optionalDisBlue").css("background-size","16px 16px");
        }
    }

    for(var i=0;i<obj.length;i++){

        //第一位连线
        var firstCon = $(".dataTable tbody tr").eq(i).find('.firstCon');
        //firstCon.eq(obj[i].kaijianghao[0]-1).html(obj[i].kaijianghao[0]);
        var top = firstCon.eq(obj[i].kaijianghao[0]-1).position().top;
        var left = firstCon.eq(obj[i].kaijianghao[0]-1).position().left;
        var rectF = {
            top:top,
            left:left,
            val:obj[i].kaijianghao[0]
        };
        coordinateRectF.push(rectF);

        //第二位连线
        var secondCon = $(".dataTable tbody tr").eq(i).find('.secondCon');
        //secondCon.eq(obj[i].kaijianghao[1]-1).html(obj[i].kaijianghao[1]);
        var topS = secondCon.eq(obj[i].kaijianghao[1]-1).position().top;
        var leftS = secondCon.eq(obj[i].kaijianghao[1]-1).position().left;
        var rectS = {
            top:topS,
            left:leftS,
            val:obj[i].kaijianghao[1]
        };
        coordinateRectS.push(rectS);

        //第三位连线
        var thirdCon = $(".dataTable tbody tr").eq(i).find('.thirdCon');
        //thirdCon.eq(obj[i].kaijianghao[2]-1).html(obj[i].kaijianghao[2]);
        var topT = thirdCon.eq(obj[i].kaijianghao[2]-1).position().top;
        var leftT = thirdCon.eq(obj[i].kaijianghao[2]-1).position().left;
        var rectT = {
            top:topT,
            left:leftT,
            val:obj[i].kaijianghao[2]
        };
        coordinateRectT.push(rectT);
    }

    allCoordinateRect.push(coordinateRectF);
    allCoordinateRect.push(coordinateRectS);
    allCoordinateRect.push(coordinateRectT);

    //canvasF(allCoordinateRect);

    svg(coordinateRectF,coordinateRectS,coordinateRectT,allCoordinateRect);

    nextTable();

});


$(window).resize(function() {
    if($(window).width()>1000){
        window.location.reload();
    }
});

function dataHandle() {
    var winHeight = $(window).height();
    var tableHeAll = $("#bottomTable").height() + $("#groomNum").height() + $("#header").height() + $(".menu").height();
    $(".dataTable").height(winHeight - tableHeAll);
}

function canvasF(allCoordinateRect){


    var he = $(".dataTable tbody tr").eq(0).height()/2;
    var wi = $(".dataTable tbody tr").eq(0).find(".firstCon").eq(0).width()/2;
    var widthLattice = 14;
    var heightLattice = 20;
    var deviationRow = 4;
    var deviationCol = 10;
    var tag = 8;
    var maxW = 12;

    var height = $('.dataTable').height();
    var width = $('.dataTable').width();
    var canvas = $("<canvas id='canvas'></canvas>");
    canvas.attr("height",height).attr('width',width);

    $(".main").append(canvas);

    var oC = document.getElementById('canvas');
    var oGC = oC.getContext('2d');
    oGC.lineWidth=1;
    oGC.font = "20px iskoola Pota";
    oGC.strokeStyle = "black";
    oGC.textAlign="center";

    if($(window).height()>1200){
        oGC.font = "14px iskoola Pota";
        widthLattice = 15;
        heightLattice = 15;
        deviationRow = 3;
        deviationCol = 7;
        oGC.lineWidth=1;
    }
    if($(window).width()<1000){
        oGC.font = "5px iskoola Pota";
        widthLattice = 2*wi;
        heightLattice = 2*he-4;
        deviationRow = 1;
        deviationCol = he-2;
        tag = 4;
        maxW = 8;
        oGC.lineWidth=1;
    }

    for(var can=0;can<allCoordinateRect.length;can++){
        oGC.beginPath();
        oGC.moveTo(allCoordinateRect[can][0].left+wi+0.5,allCoordinateRect[can][0].top+he+0.5);
        for(var o=1;o<allCoordinateRect[can].length;o++){
            oGC.lineTo(allCoordinateRect[can][o].left+wi+0.5,allCoordinateRect[can][o].top+he+0.5);
        }
        oGC.stroke();
        oGC.closePath();
    }

/*    for(var rec=0;rec<allCoordinateRect.length;rec++){
        if(rec == 0){
            oGC.fillStyle='#F0FFF8';
        }else if (rec ==1){
            oGC.fillStyle='#F0FFF8';
        }else{
            oGC.fillStyle='#EFF9EE';
        }
        for(var oo=0;oo<allCoordinateRect[rec].length;oo++){
            oGC.fillRect(allCoordinateRect[rec][oo].left+deviationRow,allCoordinateRect[rec][oo].top+he-deviationCol,widthLattice,heightLattice);
            oGC.strokeText(allCoordinateRect[rec][oo].val,allCoordinateRect[rec][oo].left+wi+2,allCoordinateRect[rec][oo].top+he+tag,maxW);
        }
    }*/
}

function svg(coordinateRectF,coordinateRectS,coordinateRectT,allCoordinateRect){
    var height = $('.dataTable').height();
    var width = $('.dataTable').width();
    var he = $(".dataTable tbody tr").eq(0).height()/2;
    var wi = $(".dataTable tbody tr").eq(0).find(".firstCon").eq(0).width()/2;
    var arraySvgF = [];
    var arraySvgS = [];
    var arraySvgT = [];

    var svg = $("<svg id='svg' version='1.1' xmlns='http://www.w3.org/2000/svg'></svg>");
    svg.attr("height",height).attr('width',width);
    $(".main").append(svg);

    //画线
    var lineWidth = 1;
    var size = 22;
    var xxx = 1;
    var yyy = 6;

    if($(window).width()<1000){
        size = 14;
        xxx = 2;
        yyy = 5;
        lineWidth = 0.3;
    }

    for (var q=0;q<coordinateRectF.length;q++){
        coordinateRectF[q].left = coordinateRectF[q].left+wi;
        coordinateRectF[q].top = coordinateRectF[q].top+he;
    }
    for (var u=0;u<coordinateRectF.length;u++){
        arraySvgF.push(coordinateRectF[u].left+","+coordinateRectF[u].top);
    }

    var firstLine = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    firstLine.setAttribute("fill", "none");
    firstLine.setAttribute("points", arraySvgF);
    firstLine.setAttribute("stroke", "black");
    firstLine.setAttribute("stroke-width", lineWidth);
    svg.append(firstLine);

    for (var q=0;q<coordinateRectS.length;q++){
        coordinateRectS[q].left = coordinateRectS[q].left+wi;
        coordinateRectS[q].top = coordinateRectS[q].top+he;
    }
    for (var u=0;u<coordinateRectS.length;u++){
        arraySvgS.push(coordinateRectS[u].left+","+coordinateRectS[u].top);
    }

    var secondLine = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    secondLine.setAttribute("fill", "none");
    secondLine.setAttribute("points", arraySvgS);
    secondLine.setAttribute("stroke", "black");
    secondLine.setAttribute("stroke-width", lineWidth);
    svg.append(secondLine);

    for (var q=0;q<coordinateRectT.length;q++){
        coordinateRectT[q].left = coordinateRectT[q].left+wi;
        coordinateRectT[q].top = coordinateRectT[q].top+he;
    }
    for (var u=0;u<coordinateRectT.length;u++){
        arraySvgT.push(coordinateRectT[u].left+","+coordinateRectT[u].top);
    }

    var thirdLine = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    thirdLine.setAttribute("fill", "none");
    thirdLine.setAttribute("points", arraySvgT);
    thirdLine.setAttribute("stroke", "black");
    thirdLine.setAttribute("stroke-width", lineWidth);
    svg.append(thirdLine);

    console.log(allCoordinateRect);


    //划正方形+文字
    var colorF = "#EFF9EE";
    var colorS = "#F0FFF8";
    var colorT = "#EFF9EE";
    var fontFamily = "IskoolaPota";
    var color;
    for(var p=0;p<allCoordinateRect.length;p++){
        if(p==0){
            color = colorF;
        }else if(p==1){
            color = colorS;
        }else{
            color = colorT;
        }
        for(var y=0;y<allCoordinateRect[p].length;y++){
            var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
            $(rect).attr("x", allCoordinateRect[p][y].left-wi+wi*3/5).attr("y",allCoordinateRect[p][y].top+wi*3/5-he).attr("width",wi*6/5).attr("height",he*6/5);
            $(rect).attr("fill",color);
            $(text).attr("x", allCoordinateRect[p][y].left+xxx).attr("y",allCoordinateRect[p][y].top+yyy);
            $(text).attr("text-anchor","middle").html(allCoordinateRect[p][y].val);
            $(text).attr("font-size",size).attr("letter-spacing","-1").attr("font-family",fontFamily);
            svg.append(rect);
            svg.append(text);
        }
    }

}

function nextTable() {
    var bottomTable = $("#bottomTable tbody tr");
    var tr = bottomTable.length;
    var td = bottomTable.eq(0).length;

    for(var i=0;i<tr;i++){  //tr

        if(i%2 ==0) {
            $("#bottomTable tbody tr").eq(i).css("background","#F1F1D6");
        }else{
            $("#bottomTable tbody tr").eq(i).css("background","#DBECC7");
        }

        for(var j=0;j<td;j++){  //td
            var tdFor = $("#bottomTable tbody tr").eq(0).find("td").eq(j);

        }
    }
}
















